<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <title>DragZoomControl Documentation: Examples</title>
   <link rel="stylesheet" type="text/css" href="http://code.google.com/apis/maps/documentation/local_extensions.css" /> 
   <link rel="stylesheet" type="text/css" href="http://code.google.com/css/dev_docs.css" />
   <script type="text/javascript" src="http://code.google.com/apis/maps/include/prettify.js"></script>
  </head>
  <body onload="prettyPrint()">
<h1><a></a>DragZoomControl Examples</h1>
<h2><a name="TOC"></a>Table of Contents</h2>
<ul>
<li><a href="#HowTo">How-To</a></li>
<li><a href="#Simple">Simple Example</a></li>
<li><a href="#EnableBackButton">Enabling the Back Button</a></li>
<li><a href="#Options">Customizing the Options</a></li>
<li><a href="#Advanced">Advanced: Using Callbacks</a></li>
<li><a href="#Cluster">Advanced: Combining with Cluster Zoom</a></li>
<li><a href="#Browser">Browser Compatibility</a></li>
<li><a href="#Notes">Notes</a></li>
</ul>
<h2><a name="HowTo"></a>How-To</h2>
<p>
You can add the DragZoomControl to any Google map with a couple of lines of code.
</p>
<ol>
  <li>Include draggzoom.js in your document header. </li>
    <pre class="code">&lt;script src=&quot;dragzoom.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;</pre>

  <li>Add the DragZoomControl to your map like any other control. Example:</li>
    <pre class="code">map = new GMap2(document.getElementById('map'));<br />map.addControl(new GSmallMapControl());<br /><strong>map.addControl(new DragZoomControl());
</strong></pre>
  <li><strong>Important!</strong> Make sure your and doctype and namespaces are set correctly:</li>
    <pre class="code">&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;<br />
&quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;<br />
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; xmlns:v=&quot;urn:schemas-microsoft-com:vml&quot; &gt;</pre>
  <li>For Internet Explorer: make sure you enable the VML behavior:
    <pre class="code">&lt;style type=&quot;text/css&quot;&gt;v\:* {behavior:url(#default#VML);}&lt;/style&gt;</pre>
  </li>
</ol>

<h2><a name="Simple"></a>Simple Example</h2>
<p> This is the &quot;Hello World&quot; code from the GMaps documentation. The lines you need to add for DragZoom are in bold. </p>

<pre class="code">&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot;<br />   &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;<br />&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; xmlns:v=&quot;urn:schemas-microsoft-com:vml&quot; &gt;<br />  &lt;head&gt;<br />    &lt;style type=&quot;text/css&quot;&gt;v\:* {behavior:url(#default#VML);}&lt;/style&gt;<br />     &lt;meta http-equiv=&quot;content-type&quot; content=&quot;text/html; charset=utf-8&quot;/&gt;<br />    &lt;title&gt;Google Maps JavaScript API Example&lt;/title&gt;
		<br />    &lt;script src=&quot;http://maps.google.com/maps?file=api&amp;v=2&amp;key=YOUR_KEY_HERE&quot;<br />      type=&quot;text/javascript&quot;&gt;&lt;/script&gt;<br />    <strong>&lt;script src=&quot;../src/dragzoom.js&quot; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;</strong><br />    &lt;script type=&quot;text/javascript&quot;&gt;<br /><br />    //&lt;![CDATA[<br /><br />    function load() {<br />      if (GBrowserIsCompatible()) {<br />        var map = new GMap2(document.getElementById(&quot;map&quot;));<br />        map.setCenter(new GLatLng(37.4419, -122.1419), 13);<br />       <strong> map.addControl(new DragZoomControl());</strong><br />      }<br />    }<br /><br />    //]]&gt;<br />    &lt;/script&gt;<br />  &lt;/head&gt;<br />  &lt;body onload=&quot;load()&quot; onunload=&quot;GUnload()&quot;&gt;<br />    &lt;div id=&quot;map&quot; style=&quot;width: 900px; height: 600px&quot;&gt;&lt;/div&gt;<br />  &lt;/body&gt;<br />&lt;/html&gt;</pre>

<p>
<a href="../examples/simpledragzoom.html">View example (simpledragzoom.html).</a>
</p>

<h2><a name="EnableBackButton"></a>Enabling the Back Button</h2>
<p> The DragZoom Control back button, when enabled, allows the user to return the map to the state it was in prior to the Drag Zoom with a single click.
The back button will appear directly under the DragZoom button after the first DragZoom is done and will dissapear after the map has gone back to its 
original state.  Successive DragZooms to increasingly higher zoom levels are supported.
<p>
The example uses the &quot;Hello World&quot; code again (but this time moved to the East Coast to provide regional "balance"). 
Note the one option added to the DragZoom initialization call which enables the back button.  When you 
run this example, do a DragZoom and you will see the back button appear.  Do several successive DragZooms and you can back them out  in reverse order.

<pre class="code">
    function load() {
      if (GBrowserIsCompatible()) {
        var map = new GMap2(document.getElementById('map'));
        map.setCenter(new GLatLng(40.78, -73.9713), 12);
        map.addControl(new GSmallMapControl());
        <b>map.addControl(new DragZoomControl({}, {backButtonEnabled: true}, {}));</b>
      }
    }
</pre>

<p>
<a href="../examples/simpledragzoombackbutton.html">View back button enabled example.</a>
</p>

<h3>The Back Button and Map Types</h3>
<p> The DragZoomControl back button restores the map context as it was prior to the previous DragZoom.  The map context not only
means the map center and zoom level, but the map type as well.  This example illustrates this capability.
<p>
The map in the example shows Greater New York. The DragZoom Button is in the top left of the map and the usual Map Type Controls are in the upper
right of the map.
<ul><li>Choose an area using the DragZoom around New York Harbor (about 1/3 of the screen). When the map has zoomed in, change the Map Type to Hybrid.</li>
<li>Now do another DragZoom (don't click the back button yet) highlighting the Brooklyn Waterfront and then change the Map Type to Satellite.</li>
<li>Now use the DragZoom back button and you will see the sequence reversed. The Map Types will be restored to the value for each zoom level.</li></ul>
<p>Play around, zooming in and out using the DragZoom and changing the Map Type Controls.
<p>
<a href="../examples/dragzoombackbuttonmaptypes.html">View example of restoring Map Types with the back button</a>
</p>


<h2><a name="Options"></a>Customizing the Options</h2>
<p>The DragZoom constructor takes three optional arguments, <a href="reference.html#DragZoomBoxStyleOptions">DragZoomBoxStyleOptions</a>, 
<a href="reference.html#DragZoomOtherOptions">DragZoomOtherOptions</a>, and <a href="reference.html#DragZoomCallbacks">DragZoomCallbacks</a>.
  All three are optional, but if you want to include one, you need to include the previous hashes too, even if they are empty. 
  The following example starts with all the default options but allows you to change any option, style or HTML in the first two arguments that you wish:</p>

  <p>Check out this <a href="../examples/dragzoomoptions.html">interactive options playground.</a>
  </p>

<h3>Specifying the position of the DragZoomControl button</h3>
<p>Like all controls, DragZoomControl can be placed anywhere you want on the map by specifying an optional GControlPosition.  (Note this
is a <b>map.addControl</b> option, not a <b>DragZoomControl</b> option.)</p>

<pre class="code">map.addControl(new DragZoomControl(),new GControlPosition(G_ANCHOR_TOP_RIGHT,new GSize(10,10)));</pre>

<p>All the following examples use this option to control the control button(s) position.</p>

<h3>Button Styles: making the control buttons look the way you want </h3>
<p> The control button default style creates servicable buttons, but you may want to customize them to fit the "look and feel" of your map.
This example shows the use of the TextualZoomControl (from the <a href="http://www.google.com/apis/maps/documentation/#Custom_Controls">
Google Maps API documentation page</a>) and the DragZoomControl with a consistant style.  These style definitions go in the second optional
parmeter in the DragZoomControl initialization call (see the section above for all the DragZoomControl options): 
<p>
These are the styles and other parameters used in this example:
<pre class="code">
        var otherOpts = { 
          buttonStartingStyle: {display:'block',color:'black',background:'white',width:'7em',textAlign:'center',
            fontFamily:'Verdana',fontSize:'12px',fontWeight:'bold',border:'1px solid gray',paddingBottom:'1px',cursor:'pointer'},
          buttonHTML: 'Drag Zoom',
          buttonZoomingHTML: 'Drag a region on the map (click here to reset)',
          buttonZoomingStyle: {background:'yellow'},
          backButtonHTML: 'Drag Zoom Back',  
          backButtonStyle: {display:'none',marginTop:'3px',background:'#FFFFC8'},
          backButtonEnabled: true
        } 
        map.addControl(new DragZoomControl({}, otherOpts, {}), new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(7,39)));
</pre>

<p>
<a href="../examples/dragzoombackbuttonstyles.html">View button styles example.</a>
</p>

<h3>Using an image for a button instead of text</h3>
<p>The next example demonstrates how to substitute an image for text on the DragZoom Control buttons. Basically, you can do so by using the buttonHTML and 
  backButtonHTML and possibbly buttonZoomingHTML arguments (in DragZoomOtherOptions) to specify images rather than text. 
  You can put any valid html in these arguments, even a combination of images and text.   Just make sure you set the width and height of the button 
  (through the buttonStartingStyle or the individual button style declarations)   as appropriate for the look of the button.   If you need the size 
  or background of the button to change when activated, you can set styles in the buttonZoomingStyle argument.</p>
<p>
This example uses simple "zoom in" and "zoom out" icons for the DragZoom and back buttons, but uses text for the zooming button.  
These are the styles and parameters used in this example:
<pre class="code">
        var otherOpts = { 
          buttonStartingStyle: {background: '#FFF', paddingTop: '4px', paddingLeft: '4px', border:'1px solid black'},
          buttonHTML: '&lt;img title='Drag Zoom In' src='zoomin.gif'&gt;',
          buttonStyle: {width:'25px', height:'23px'},
          buttonZoomingHTML: 'Drag a region on the map (click here to reset)',
          buttonZoomingStyle: {background:'yellow',width:'75px', height:'100%'},
          backButtonHTML: '&lt;img title='Zoom Back Out' src='zoomout.gif'&gt;',  
          backButtonStyle: {display:'none',marginTop:'5px',width:'25px', height:'23px'},
          backButtonEnabled: true, 
          overlayRemoveTime: 1500
        } 
        map.addControl(new DragZoomControl({}, otherOpts, {}), new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(10,15)));

</pre>
<p>
<a href="../examples/dragzoombackbuttonwithimages.html">View example using images for the DragZoom and back button.</a>
</p>

<h2><a name="Advanced"></a>Advanced: Using Callbacks</h2>
<p>This example customizes the overlay (with DragZoomBoxStyleOptions), provides some of the additional 
  options (with DragZoomOtherOptions), and all of the callbacks (with DragZoomCallbacks): <a href="http://earthcode.com/demo/gzoom/demo1.html">see 
  example</a>. The DragZoom instantiation code:</p>
	
<pre class="code">
  /* first set of options is for the visual overlay.*/
  var boxStyleOpts = {
    opacity:.2,
    border:"2px solid red"
  }

  /* second set of options is for everything else */
  var otherOpts = {
    buttonHTML:"&lt;img src='zoom-button.gif' /&gt;",
    buttonZoomingHTML:"&lt;img src='zoom-button-activated.gif' /&gt;",
    buttonStartingStyle:{width:'24px',height:'24px'}
  };

  /* third set of options specifies callbacks */
  var callbacks = {
    buttonclick:function(){display("Looks like you activated DragZoom!")},
    dragstart:function(){display("Started to Drag . . .")},
    dragging:function(x1,y1,x2,y2){display("Dragging, currently x="+x2+",y="+y2)},
    dragend:function(nw,ne,se,sw,nwpx,nepx,sepx,swpx){display("Zoom! NE="+ne+";SW="+sw)}
  };
  
  map.addControl(new DragZoomControl(boxStyleOpts, otherOpts, callbacks));	

</pre>

<p>
<a href="../examples/advanceddragzoom.html">View example (advanceddragzoom.html).</a>
</p>

<h2><a name="Cluster"></a>Advanced: Combining with Cluster Zoom</h2>
<p> 
Some applications use a zoom mechanisim tailored to the application.  The most obvious example is when markers are clustered.  Clustering
of markers is a way to avoid "clutter" at low zoom levels, and by using a "cluster marker" as a proxy to represent many individual markers which
are made visible at higher zoom levels.  The Marker Manager is used to control when a particular type of marker is shown.
The application may use the cluster markers to bring the user in to the underlying markers it represents by zooming in to the appropriate zoom level
and map center when the cluster marker is clicked.
<p> 
The DragZoomControl back button functionality provides a ready made structure to integrate this type of application zooming methodology with
the DragZoom functionality.  Two features are used to implement this: a method, 
(<a href="reference.html#DragZoomMethods">DragZoomMethods: saveMapContext()</a>) and a callback,  
(<a href="reference.html#DragZoomCallbacks">DragZoomCallbacks: backbuttonclick</a>).  The method is called when the application wants to zoom in to the
area of interest (when a cluster marker is clicked).  The DragZoom Control then saves the map context on behalf of the application which then
does the appropiate zoom and map centering.  The method also allows the application to set new text on the back button.  When the user
subsequently clicks the back button, the map context is restored and an application callback function is called to allow any  "clean up" which
may be necessary.
<p>
In this example, a very simple version of clustering is illustrated: A single cluster marker is placed on the map in Manhattan. Clicking on 
this cluster marker will cause the map to zoom in to the Central Park area where several markers are displayed for points of interest.
When the cluster zoom back button is clicked, the application closes the infoWindow as an example of a clean up.  The cluster zoom can be combined 
with the DragZoom.
<p>
This code shows the creation of the map, it's controls and the labels and markers for the example.  
Remember in order to use the method, the control needs a name:
<pre class="code">
    function load() {
      if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById('map'));
        map.setCenter(mapCenter, mapZoom);

        markerMgr = new MarkerManager(map);

        var otherOpts = {
          buttonStartingStyle: {display:'block',color:'black',background:'white',width:'7em',textAlign:'center',
            fontFamily:'Verdana',fontSize:'12px',fontWeight:'bold',border:'1px solid gray',cursor:'pointer'},
          buttonHTML: 'Drag Zoom',
          buttonZoomingHTML: 'Drag a region on the map (click here to reset)',
          buttonZoomingStyle: {background:'yellow'},
          backButtonHTML: 'Drag Zoom Back',  
          backButtonStyle: {display:'none',marginTop:'3px',background:'#FFFFC8'},
          backButtonEnabled: true, 
          overlayRemoveTime: 1500
        } 
        var callbacks = {<b>backbuttonclick:function(method){restoreContextCallback(method)}</b>}
 
        map.addControl(<b>dragZoom = new DragZoomControl</b>({}, otherOpts, callbacks), 
          new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(7,7)));

        addBoroughLabels();  // Add a label for each borough centered on that borough and load into the Marker Manager
        addParkMarkers();    // Add a marker for the parks near the center of each borough and load into the Marker Manager
        markerMgr.refresh(); // Turn everything on
      }
    }
</pre>
<p>
This shows how the method is invoked:
<pre class="code">

    // Function to save the map context via the DragZoomControl method and then zoom in to the (lat,lng)
    // called when the cluster marker is clicked
    function saveContextAndZoom(lat,lng,zoom,name) {
      buttonText = name+' Zoom Back';
      <b>dragZoom.saveMapContext(buttonText);</b>
      map.setCenter(new GLatLng(lat,lng),parseInt(zoom));
    }

</pre>
<p>
This shows the callback function:
<pre class="code">

    // Function called after the map context is restored from the cluster zoom
    // This callback clears the infoWindow if it is open
    <b>function restoreContextCallback(method)</b> {
      if (method) map.closeInfoWindow();      // "method" indicates this particular restore was for 
    }                                         // a zoom called by the method, not the DragZoom button

</pre>
<p> 
To see the integration of this scheme with the Drag Zoom Control, bring up the example and do the following: 
<ul>
  <li>The map in the example shows Greater New York. Use The DragZoom Button in the top left and select a rectangle encompassing 
      Manhattan (about 1/4 of the map).</li> 
  <li>A single cluster marker should appear on Central Park. Click on it.</li>
  <li>You should now see a closeup of the Central Park area with a number of markers indicating points of interest.  
      Notice also that the text on the back button has changed. Click on the markers and zoom in further using the DragZoom button.</li>
  <li>Now use the DragZoom back button.  It will take you back through the sequence.</li>
</ul>
<p><a href="../examples/advanceddragzoombackbutton.html">View example of the integration of application zoom with the DragZoomControl</a>
</p>
<p>
<b><u>And here's a real world example:</u></b>
<ul>
<p>
The map at the link below shows survey markers in Brooklyn (Kings County), NY.  The large white and green markers are cluster markers.  
Click on one of them and a link will appear in the infoWindow which, when clicked, will cause a zoom in to the underlying markers (a cluster zoom).
<p>
Try interleaving DragZooms and cluster zooms and then use the back button to work backwards. Note: if you DragZoom in too far on the first time,
you'll bypass the cluster zoom (since you'll get in to the zoom level where the individual markers are displayed).  So start with a fairly
wide DragZoom, or start with a cluster zoom. When you start to zoom in, a small label will appear next to each marker.  These might
cause some visual clutter.  To turn them off, mouseover the "Toggle" control to the right of the zoom controls and click on "Turn Labels Off" on 
the drop down menu.
<p>
<a target="_blank" href="http://www.stuyvesantcove.org/benchmarking/BM_Benchmarking.html?index=HIDE&header=HIDE#&type=COUNTY&county=NYKINGS&cttype=MAP">
View Brooklyn survey markers map</a> (Will open in a new window.)
</ul>

<h2><a name="Browser"></a>Browser compatibility</h2>
<p>You need a modern browser. DragZoom has been tested with IE6/XP, IE7/XP,Safari2/OS10.4,
FF1.4/OS10.4, FF1.4.1/XP, FF2/XP.</p>
<p>It works with  Opera9/XP, but there is some jumpiness and odd scrollbar behavior. </p>

<h2><a name="Notes"></a>Notes</h2>
<ul>
    <li>If you resize the map div via CSS you have to call map.checkResize() -- Google's rules, not mine!</li>
    <li>on IE, you must have VML enabled for the post-zoom outline to display: <a href="http://www.google.com/apis/maps/documentation/#XHTML_and_VML">see here</a></li>
    <li>if you're seeing wierdness on IE, check your doctype. I tested with mostly with XHTML 1.0 Transitional, and noticed some potential problems with border widths and scrolling on other doctypes.</li>
    <li>like any GMaps application, <strong>make sure you register GUnload() on document unload</strong>. See Google's documentation if you're not sure how.</li>
</ul>

<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-964209-4";
urchinTracker();
</script>

</body>
</html>
